<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式与数据劫持</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        数据劫持底层其实是分为两步：
            1.修改原数据
            2.重新渲染
        Vue底层的数据劫持是通过观察者模式+虚拟DOM渲染实现的
        数据劫持是数据代理机制的一部分（setter）
     -->
    <div id="app">
        <h1>{{msg}}</h1>
        <div>姓名：{{name}}</div>
        <div>年龄：{{age}}岁</div>
        <div>数字：{{a.b.c.e}}</div>
        <div>邮箱：{{a.email}}</div>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data : {
                msg : '响应式与数据劫持',
                name : 'jackson',
                age : 20,
                a : {
                    b : {
                        c : {
                            e : 1
                        }
                    }
                }
            }
        })

        // 测试：后期给Vue实例动态的追加的一些属性，会添加响应式处理吗？
        // 后期通过直接赋值方式给vue实例追加的属性，vue没有为其添加响应式处理。
        // vm.$data.a.email = 'jack@126.com';

        // 如果想给后期追加的属性添加响应式处理的话，可以调用以下两个方法：
        // 1.Vue.set()全局操作 2.vm.$set()局部操作
        // Vue.set(目标对象, 属性名, 属性值)
        // Vue.set(vm.$data.a, 'email', 'jack@126.com');
        // Vue.set(vm.a, 'email', 'jack@123.com');
        vm.$set(vm.a, 'email', 'jack@456.com');

        // [Vue warn]: Avoid adding reactive properties to a Vue instance or
        // its root $data at runtime - declare it upfront in the data option.
        // 翻译：避免在运行时向Vue实例或其根$data添加响应式属性，应在data选项中提前声明。
        // 不能直接给vm或vm.$data 追加响应式属性。只能在声明时提前定义好。不然会报错
        // Vue.set(vm, 'x', '1');
        // Vue.set(vm.$data, 'x', '1');
    </script>
</body>
</html>
